<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">班次编码</label>
        <el-input v-model="query.shiftCode" clearable placeholder="班次编码" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>
        <label class="el-form-item-label">班次名称</label>
        <el-input v-model="query.shiftName" clearable placeholder="班次名称" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>
        <rrOperation :crud="crud"/>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission"/>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="班次编码" prop="shiftCode">
            <el-input v-model="form.shiftCode" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="班次名称" prop="shiftName">
            <el-input v-model="form.shiftName" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="班组" prop="shiftName">
            <el-select v-model="form.teamGroupId" placeholder="请选择" style="width: 370px;">
              <el-option
                v-for="item in teamGroups"
                :key="item.id"
                :label="item.teamGroupName"
                :value="item.id">
                <span style="float: left">{{ item.teamGroupName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.teamGroupCode }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <!--<el-input v-model="form.startTime" style="width: 370px;" />-->
            <el-time-picker
              v-model="form.startTime"
              format="HH:mm"
              value-format='HH:mm'
              placeholder="任意时间点" style="width: 370px;">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-time-picker
              v-model="form.endTime"
              format="HH:mm"
              value-format='HH:mm'
              placeholder="任意时间点" style="width: 370px;">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="生产节拍" prop="meter">
            <el-input-number v-model="form.meter" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="计划产量" prop="yield">
            <el-input-number v-model="form.yield" :step="1" step-strictly style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="是否禁用" prop="isDisable">
            <el-radio v-model="form.isDisable" v-for="item in dict.whether" :key="item.id" :label="item.value">{{
              item.label }}
            </el-radio>
          </el-form-item>
          <el-form-item label="是否跨天" prop="isAcross">
            <el-radio v-model="form.isAcross" v-for="item in dict.whether" :key="item.id" :label="item.value">{{
              item.label }}
            </el-radio>
          </el-form-item>
          <el-form-item label="备注说明">
            <el-input v-model="form.remark" style="width: 370px;"/>
          </el-form-item>
          <el-button type="text" style="float:right;" @click="drawer=true" v-if="noProduction">非生产时间</el-button>
          <!--<el-form-item label="所属模型">-->
          <!--<el-input v-model="form.templateCode" style="width: 370px;" />-->
          <!--</el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--新增非生产时间-->
      <el-dialog
        width="35%"
        title="新增非生产时间"
        :visible.sync="innerVisible"
        append-to-body>
        <el-form ref="form" :model="haltForm" label-width="70px">
          <el-form-item label="休息开始时间" prop="startTime">
            <!--<el-input v-model="form.startTime" style="width: 370px;" />-->
            <el-time-picker
              v-model="haltForm.startTime"
              format="HH:mm"
              value-format='HH:mm'
              placeholder="任意时间点" style="width: 370px;">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="休息结束时间" prop="endTime">
            <!--<el-input v-model="form.endTime" style="width: 370px;" />-->
            <el-time-picker
              v-model="haltForm.endTime"
              format="HH:mm"
              value-format='HH:mm'
              placeholder="任意时间点" style="width: 370px;">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="haltForm.type" filterable placeholder="请选择" style="width: 370px;">
              <el-option
                v-for="item in dict.classes_type"
                :key="item.id"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="是否禁用">
            <el-radio v-model="haltForm.isDisable" v-for="item in dict.whether" :key="item.id" :label="item.value">{{
              item.label }}
            </el-radio>
          </el-form-item>
          <el-form-item label="是否跨天">
            <el-radio v-model="haltForm.isAcross" v-for="item in dict.whether" :key="item.id" :label="item.value">{{
              item.label }}
            </el-radio>
          </el-form-item>
          <el-form-item label="备注说明">
            <el-input v-model="haltForm.remark" style="width: 370px;"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="cancel()">取消</el-button>
          <el-button type="primary" @click="addhaltForm()">确认</el-button>
        </div>
      </el-dialog>
      <!--非生产时间-->
      <el-drawer
        title="非生产时间"
        :visible.sync="drawer"
        :with-header="false" size="50%">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>非生产时间</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="innerVisible = true">新增</el-button>
          </div>
          <template>
            <el-table
              :data="nonProductiveTime"
              style="width: 100%"
              max-height="250">
              <el-table-column
                prop="startTime"
                label="开始时间"
                width="150">
              </el-table-column>
              <el-table-column
                prop="endTime"
                label="结束时间"
                width="120">
              </el-table-column>
              <el-table-column
                prop="type"
                label="类型"
                width="120">
                <template slot-scope="scope">
                  {{ dict.label.classes_type[scope.row.type] }}
                </template>
              </el-table-column>
              <el-table-column
                prop="isDisable"
                label="是否禁用"
                width="120">
                <template slot-scope="scope">
                  {{ dict.label.whether[scope.row.isDisable] }}
                </template>
              </el-table-column>
              <el-table-column
                prop="isDisable"
                label="是否跨天"
                width="120">
                <template slot-scope="scope">
                  {{ dict.label.whether[scope.row.isAcross] }}
                </template>
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注说明"
                width="300">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, nonProductiveTime)"
                    type="text"
                    size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-drawer>
      <!--班次详情-->
      <el-dialog
        width="80%"
        title="班次详情"
        :visible.sync="classesParticulars"
        :before-close="closeTheDetails"
        append-to-body>
        <el-row v-if="this.data">
          <!--班组信息-->
          <el-col :span="24">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>班次详情</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="crud.toEdit(crud.data[0])">修改班次
                </el-button>
              </div>
              <el-descriptions title="班次详情">
                <el-descriptions-item label="班次名称">{{this.data.shiftCode}}</el-descriptions-item>
                <el-descriptions-item label="班次编码">{{this.data.shiftName}}</el-descriptions-item>
                <el-descriptions-item label="开始时间">{{this.data.startTime}}</el-descriptions-item>
                <el-descriptions-item label="结束时间">{{this.data.endTime}}</el-descriptions-item>
                <el-descriptions-item label="生产节拍">{{this.data.meter}}</el-descriptions-item>
                <el-descriptions-item label="计划产量">{{this.data.yield}}</el-descriptions-item>
                <el-descriptions-item label="是否禁用">
                  <el-tag size="small">{{this.data.isDisable == "0" ? "否":"是"}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="是否跨天">
                  <el-tag size="small">{{this.data.isAcross == "0" ? "否":"是"}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="备注">{{this.data.remark}}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <!--班组人员信息-->
          <el-col :span="24">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>班次休息时间</span>
              </div>
              <shiftTime :id="this.data.id"></shiftTime>
            </el-card>
          </el-col>
        </el-row>
      </el-dialog>

      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="shiftCode" label="班次编码"/>
        <el-table-column prop="shiftName" label="班次名称"/>
        <el-table-column prop="meter" label="生产节拍"/>
        <el-table-column prop="yield" label="计划产量"/>
        <el-table-column prop="startTime" label="开始时间"/>
        <el-table-column prop="endTime" label="结束时间"/>
        <el-table-column prop="isDisable" label="是否禁用">
          <template slot-scope="scope">
            {{ dict.label.whether[scope.row.isDisable] }}
          </template>
        </el-table-column>
        <el-table-column prop="isAcross" label="是否跨天">
          <template slot-scope="scope">
            {{ dict.label.whether[scope.row.isAcross] }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注说明"/>
        <el-table-column prop="createBy" label="创建人"/>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column prop="updateBy" label="更新人"/>
        <el-table-column prop="updateTime" label="更新时间"/>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="particulars(scope.row)">详情
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="toDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
  </div>
</template>

<script>
  import crudFactoryShift from '@/api/factory/factoryShift'
  import CRUD, {presenter, header, form, crud} from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import crudFactoryTeamGroup from '@/api/factory/factoryTeamGroup'
  import shiftTime from '../shift_time/index'


  const defaultForm = {
    id: null,
    teamGroupId: null,
    shiftCode: null,
    shiftName: null,
    startTime: null,
    endTime: null,
    isDisable: "0",
    remark: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    templateCode: null,
    isAcross: '0',
    meter: null,
    yield: null
  }
  export default {
    props: [
      "modelCode"
    ],
    dicts: ['whether', 'classes_type'],
    name: 'FactoryShift',
    components: {pagination, crudOperation, rrOperation, udOperation, crudFactoryTeamGroup, shiftTime},
    mixins: [presenter(), header(), form(defaultForm), crud()],
    cruds() {
      return CRUD({
        title: '班次信息',
        url: 'api/factoryShift',
        idField: 'id',
        sort: 'id,desc',
        crudMethod: {...crudFactoryShift}
      })
    },
    watch: {
      modelCode(value) {
        this.queryPage(value)
      }
    },
    data() {
      return {
        templateCode: "",
        teamGroups: [],
        drawer: false,
        innerVisible: false,
        classesParticulars: false,
        data: null,
        noProduction: true,
        haltForm: {
          id: null,
          shiftId: null,
          startTime: null,
          endTime: null,
          remark: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          type: null,
          isDisable: '0',
          isAcross: '0'
        },
        nonProductiveTime: [],
        permission: {
          add: ['admin', 'factoryShift:add'],
          edit: ['admin', 'factoryShift:edit'],
          del: ['admin', 'factoryShift:del']
        },
        rules: {
          teamGroupId: [
            {required: true, message: '班组ID不能为空', trigger: 'blur'}
          ],
          shiftCode: [
            {required: true, message: '班次编码不能为空', trigger: 'blur'}
          ],
          shiftName: [
            {required: true, message: '班次名称不能为空', trigger: 'blur'}
          ],
          startTime: [
            {required: true, message: '开始时间不能为空', trigger: 'blur'}
          ],
          endTime: [
            {required: true, message: '结束时间不能为空', trigger: 'blur'}
          ],
          isDisable: [
            {required: true, message: '是否禁用不能为空', trigger: 'blur'}
          ],
          isAcross: [
            {required: true, message: '是否跨天不能为空', trigger: 'blur'}
          ],
          meter: [
            {required: true, message: '生产节拍不能为空', trigger: 'blur'}
          ],
          yield: [
            {required: true, message: '计划产量不能为空', trigger: 'blur'}
          ]
        },
        queryTypeOptions: [
          {key: 'shiftCode', display_name: '班次编码'},
          {key: 'shiftName', display_name: '班次名称'}
        ]
      }
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh]() {
        crudFactoryTeamGroup.getTeamOrGroup().then(res => {
          this.teamGroups = res
        });
        this.crud.params.templateCode = this.templateCode;
        return true
      },
      //新增前
      [CRUD.HOOK.beforeSubmit]() {
        this.form.templateCode = this.templateCode;
        this.form.factoryShiftTimes = this.nonProductiveTime
        return true
      },
      //新增之后
      [CRUD.HOOK.afterToAdd]() {
        this.haltForm = {
          id: null,
          shiftId: null,
          startTime: null,
          endTime: null,
          remark: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          type: null,
          isDisable: '0',
          isAcross: '0'
        };
        return true
      },
      queryPage(code) {
        this.templateCode = code;
        this.crud.toQuery();
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      //新增非生产时间取消
      cancel() {
        this.innerVisible = false;
        this.haltForm = {
          id: null,
          shiftId: null,
          startTime: null,
          endTime: null,
          remark: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          type: null,
          isDisable: '0',
          isAcross: '0'
        };
      },
      //新增非生产时间
      addhaltForm() {
        this.nonProductiveTime.push(this.haltForm)
        this.haltForm = {
          id: null,
          shiftId: null,
          startTime: null,
          endTime: null,
          remark: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          type: null,
          isDisable: '0',
          isAcross: '0'
        };
        this.innerVisible = false;
      },
      //详情
      particulars(data) {
        this.noProduction = false
        this.data = data
        this.classesParticulars = true
      },
      // 确认删除
      toDelete(data) {
        this.$confirm("确定删除该班组?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.crud.doDelete(data);
          })
          .catch(() => {
          });
      },
      closeTheDetails(done) {
        this.noProduction = true
        done()
      }
    }
  }
</script>

<style scoped>

</style>
